<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/css/style.css" rel="stylesheet">
		<link href="static/css/bootstrap.min.css" rel="stylesheet">
    <title>聊天界面</title>
    <style>
        /*聊天框*/
        .div1{
            width: 400px;
            /* background-color: aliceblue; */
            margin: auto;
            border-style:solid ;
            border-radius: 10px;
            position: absolute;
            top: 20%;
            left: 40%;
        }
        
        /*聊天框头部*/
        .headDiv{
            height: 50px;
            line-height: 50px;
            padding-left: 15px;
            font-size: 20px;
            font-weight: 600;
            font-style:normal;
            border-style: solid;
            border-left-width: 0;
            border-right-width: 0;
            border-top-width: 0;
        }
 
        /*聊天框中部*/
        .bodyDiv{
            height: 450px;
            /* background-color: yellow; */
            overflow: auto;/* 内容溢出时自动滚动 */
        }
        .bodyDiv1L{  /* 左边发送信息 */
            height: 140px;
            width: 100%;
            /* background-color:aqua; */
        }
        .bodyDiv1leftL{ /*第一部分左边*/
            height: 60px;
            width: 60px;
            background-color:blue;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            color: white;
            margin-left: 15px;
            margin-right: 10px;
            margin-top: 10px;
            float: left;
        }
        .bodyDiv1rightL{ /*第一部分右边*/
            width: 60%;
            height: 100px;
            /* background-color:green;          */
            float: left;
            margin-top: 10px;
        }
     
        .speak1DivL{ /*第一部分聊天*/
            background-color: gray;    
            padding: 5px;
            border-radius: 0 10px 10px 10px;
            text-align: left;
            line-height: 50px;
            margin-top: 5px;
        }
 
        .bodyDiv1R{  /*右边发送信息 */
            height: 140px;
            width: 100%;
            /* background-color:aqua; */
        }
        .bodyDiv1leftR{ /*第二部分左边*/
            height: 60px;
            width: 60px;
            background-color:blue;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            color: white;
            margin-left: 15px;
            margin-right: 10px;
            margin-top: 10px;
            float: right;
        }
        .bodyDiv1rightR{ /*第二部分右边*/
            width: 60%;
            height: 100px;
            /* background-color:green; */
            float: right;
            margin-top: 10px;
            text-align: right; /*时间居右*/
        }
      
        .speak1DivR{ /*第二部分聊天*/
            background-color: gray;
            padding: 5px;
            border-radius: 10px 0 10px 10px;
            text-align: left;
            line-height: 50px;
            margin-top: 5px;
 
        }
 
        /*聊天框底部*/
        .footDiv{
            height: 150px;
            width: 100%;
            /* background-color: red; */
            border-style: solid;
            border-left-width: 0;
            border-right-width: 0;
            border-bottom-width: 0;
            position: relative;  /*position属性 */
        }
        .text{
            width: 100%;
            height: 100%;
            outline: none;
            padding: 5px;
            box-sizing: border-box;
        }
        .sent{
            height: 40px;
            width: 100px;
            background-color: rgb(63, 63, 247);
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 20px;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 40px;
        }
        .aaa{
            background-image: url(./img/background.jpg);
        }
        #logo{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 3%;
			left: 30%;
		}
        .divv{
            position: absolute;
            top:1%;
            left: 10%;
        }
       
        
    </style>
</head>
<body class="aaa">
    <img src="./img/background.jpg" class="background">

    <nav class="nav_top">
        <div class="divv">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed mean" data-toggle="collapse" data-target="#mynavbar">                     
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand logo"><img src="./img/logo.png" id="logo"></a>
            </div>
            <div id="mynavbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav nav_li navbar-right">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a href="about.html">关于我们</a>
                    </li>
                    <li>
                        <a href="zxzx.html">在线问诊</a>
                    </li>
                    <li>
                        <a href="jkkp.html">健康科普</a>
                    </li>

                    <li>
                        <a href="news.html">新闻中心</a>
                    </li>
                    <li>
                        <a href="map.html">位置导航</a>
                    </li>
                    <li>
                        <a href="contact.html">用户留言</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </nav>







    <!--聊天框-->
    <div class="div1">
        <!--聊天框头部-->
        <div class="headDiv">只因美医院在线咨询</div>
 
        <!--聊天框中部-->
        <div class="bodyDiv">
            <!--中部第一部分-->
            <div class="bodyDiv1L">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftL">蔡主任</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightL">
                    <!--中部第一部分时间-->
                    <div class="time1DivL">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivL">你好，我是鸡科的蔡主任，请问你的宠物鸡有什么问题吗？</div>
                </div>
            </div>
            <!--中部第二部分-->
            <div class="bodyDiv1R">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftR">ikun</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightR">
                    <!--中部第一部分时间-->
                    <div class="time1DivR">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivR">我的鸡这几天不吃饭</div>
                </div>
            </div>  
             <!--中部第一部分-->
             <div class="bodyDiv1L">
                <!--中部第一部分左边-->
                <div class="bodyDiv1leftL">蔡医生</div>
                <!--中部第一部分右边-->
                <div class="bodyDiv1rightL">
                    <!--中部第一部分时间-->
                    <div class="time1DivL">12:17</div>
                    <!--中部第一部分聊天内容-->
                    <div class="speak1DivL">好的，我知道了</div>
                </div>
            </div>
        </div>
 
        <!--聊天框底部-->
        <div class="footDiv" >
            <textarea  class="text" placeholder="请输入" cols="30" rows="10"></textarea>
            <div class="sent" onclick="textSout()" >发送</div>
        </div>
    </div>
 
    <script>
        function textSout(){
            var text = document.querySelector(".text").value /* 获得多行输入框内容的值*/
           
            /*得到bodyDiv1R(Div标签的bodyDiv1R属性) 的字符串格式*/
            var bodyDiv1R = ` <div class="bodyDiv1R">      
                <div class="bodyDiv1leftR">ikun</div>               
                <div class="bodyDiv1rightR">                  
                    <div class="time1DivR">12:17</div>                    
                    <div class="speak1DivR">${text}</div>
                </div>  
            </div>   `
           
            /*拼接*/
            var bodyDiv  = document.querySelector(".bodyDiv") /*先得到属性为bodyDiv的标签*/
            bodyDiv.innerHTML = bodyDiv.innerHTML+bodyDiv1R /* bodyDiv.innerHTML表示属性为bodyDiv的标签的代码内容(以字符串返回)*/
            /* 又因为bodyDiv1R也是字符串 所以上面代码表示在原有的内容上进行拼接*/
           
            /*自动滚动到底部*/
            bodyDiv.scrollTop = bodyDiv.scrollHeight
 
            /*点击发送后清空输入框内容*/
            document.querySelector(".text").value= ""                    
        }
    </script>
</body>
</html>